<template>
<!-- 1、安装dayJs插件 在项目中使用 npm install dayjs 
     2、创建components文件，将此文件放进去
     3、引入页面使用 import Weekpicker from '../../components/wangqiang-weekpicker/wangqiang-weekpicker.vue'
     4、页面上使用   <weekpicker v-model="weekVal" @change='bindWeekChange' />
 -->
    <picker mode="multiSelector" @columnchange="columnchangeYear" @change="changeYear" :value="multiIndex"
        :range="multiArray">
        <!-- <view class="uni-input">{{current.year}}年第{{current.week + 1}}周({{dayjs(current.start).format('MM/DD')}} -
            {{dayjs(current.end).format('MM/DD')}})</view> -->
        <view class="uni-input">{{current.year}}年第{{current.week + 1}}周
        </view>
    </picker>
</template>
<script>
    import dayjs from 'dayjs';
    export default {
        data() {
            return {
                dayjs,
                currentYear: 0,
                current: {
                    year: 0,
                    week: 0,
                    start: '',
                    end: ''
                }, // 选中数据
                years: [], //年
                weeks: [], //周
                multiIndex: [0, 0], // 选中数组下标
                multiArray: []
            }
        },
        props: {
            value: {
                type: Object
            },
        },
        watch: {
            value: {
                handler(value) {
                    // console.log(value, '///');
                    if (value) {
                        if (value.year) {
                            this.current.year = value.year
                            this.currentYear = value.year
                        }
                        if (value.week) {
                            this.current.week = value.week
                            this.current.start = value.start
                            this.current.end = value.end
                        }
                    }

                },
                deep: true,
                immediate: true
            },
            current: {
                handler(value) {
                    this.$emit('input', value)
                    this.$emit('change', value)
                },
                deep: true,
                immediate: true
            }
        },
        methods: {
            load() {
                if (!this.currentYear) {
                    this.currentYear = dayjs().year()
                    this.current.year = this.currentYear
                }
                let years = []
                for (let i = 1970; i <= dayjs().year(); i++) {
                    years.unshift(i)
                }
                this.years = years
                this.calculateWeeks()
                let weeks = this.weeks.map((item, index) => {
                    if (this.current.week === 0 && new Date() >= dayjs(item.start) && new Date() <= dayjs(item
                            .end)) {
                        this.current.week = index
                        this.current.start = item.start
                        this.current.end = item.end
                    }
                    return `第${index+1}周(${dayjs(item.start).format('MM/DD')} - ${dayjs(item.end).format('MM/DD')})`
                })

                this.multiArray = [this.years.map(item => {
                    return `${item}年`
                }), weeks]
                // console.log(this.value.year,'???');
                if (this.value) {
                    if (this.value.year) {
                        let bindYearIndex = 0
                        years.forEach((item, index) => {
                            if (item === this.value.year)
                                bindYearIndex = index
                        })
                        this.multiIndex = [bindYearIndex, this.value.week]
                    } else {
                        this.multiIndex = [this.years.length - 1, this.current.week]
                    }
                }


            },
            calculateWeeks() {
                const currentYear = this.currentYear
                let startOfWeek = dayjs(`${currentYear}-01-01`).startOf('week').add(1, 'day');
                // 如果第一周的第一天在去年，则跳过第一周
                if (startOfWeek.year() !== currentYear) {
                    startOfWeek = this.getWeekStart(startOfWeek.add(7, 'day'));
                }
                let endOfWeek = this.getWeekEnd(startOfWeek);
                let weeks = []
                while (startOfWeek.year() === currentYear) {
                    weeks.push({
                        start: startOfWeek.format('YYYY-MM-DD'),
                        end: endOfWeek.format('YYYY-MM-DD'),
                    });
                    startOfWeek = this.getWeekStart(endOfWeek.add(1, 'day'));
                    endOfWeek = this.getWeekEnd(endOfWeek.add(6, 'day'));
                }
                this.weeks = weeks
            },
            getWeekStart(date) {
                return dayjs(date).startOf('week').add(1, 'day');
            },
            getWeekEnd(date) {
                return dayjs(date).endOf('week').add(1, 'day');
            },
            columnchangeYear(e) {
                if (e.detail.column === 0) { //改变年
                    this.currentYear = this.years[e.detail.value]
                    this.calculateWeeks()
                    let weeks = this.weeks.map((item, index) => {
                        return `第${index+1}周(${dayjs(item.start).format('MM/DD')} - ${dayjs(item.end).format('MM/DD')})`
                    })
                    this.multiArray[1] = weeks
                }
            },
            changeYear(e) {
                this.multiIndex = e.detail.value
                this.current.year = this.years[this.multiIndex[0]]
                this.current.week = this.multiIndex[1]
                this.current.start = this.weeks[this.multiIndex[1]].start
                this.current.end = this.weeks[this.multiIndex[1]].end
            }
        },
        created() {
            this.load()
        }
    }
</script>